<template>
  <div id="app">
    <el-container>
      <!---->
      <div class="header">
        <div class="arrow-with-text" @click="goBack">
          <van-icon name="arrow-left" class="back-icon" />
          <i class="el-icon-back" style="font-size: 24px"></i>
        </div>
      </div>
      <el-header>您好！这是帮组中心，您需要些什么帮组！！！</el-header>
      <el-main>
        <div class="chat-container">
          <div class="chat-message" v-for="(message, index) in chatMessages" :key="index">
            <div :class="message.role === 'user' ? 'user-message' : 'ai-message'">
              {{ message.content }}
            </div>
          </div>
        </div>
        <div class="form-bottom">
          <el-form :inline="true" @submit.prevent="sendQuestion" >
            <el-form-item>
              <el-input v-model="question" placeholder="请输入你的问题" style="width: 100%;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sendQuestion">发送</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      question: '',
      chatMessages: []
    };
  },
  methods: {
    goBack() {
      this.$router.push('/wo');
      this.$router.go(0);
    },
    async sendQuestion() {
      if (!this.question) {
        this.$message.warning('请输入问题');
        return;
      }
      // 添加用户消息到聊天记录
      this.chatMessages.push({role: 'user', content: this.question});
      try {
        const response = await axios.post('http://localhost:6001/admin/ai/tao', {question: this.question});
        const answer = response.data;
        // 添加 AI 回复到聊天记录
        this.chatMessages.push({role: 'ai', content: answer});
      } catch (error) {
        console.error('请求出错:', error);
        this.$message.error('请求出错，请稍后重试');
      }
      // 清空输入框
      this.question = '';
    }
  }
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

el-header {
  background-color: #333;
  color: white;
  line-height: 60px;
}

el-main {
  padding: 20px;
}

.chat-container {
  border: 1px solid #ccc;
  padding: 10px;
  height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.user-message {
  text-align: right;
  background-color: #e1f5fe;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
}

.ai-message {
  text-align: left;
  background-color: #f1f8e9;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
}
.form-bottom {
  padding: 20px;
}
/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>